<template>
<view class="box">
    <view class="live-left">
        <view class="live-title">直播标题区域</view>
        <view class="video-container">
            <video id="my-player" class="video-js vjs-default-skin" controls preload="auto" 
                   :poster="posterUrl">
                <source :src="options.src" type="application/x-mpegURL">
            </video>
        </view>
        <view class="gift-area">礼物区域</view>
    </view>
    <view class="live-right">互动区域</view>
</view>
</template>

<script>
export default {
    data() {
        return {
            options: {
                src: "http://192.168.0.151:7788/live/666/hls.m3u8"
            },
            posterUrl: "https://picsum.photos/1920/1080?random=1",
            player: null
        }
    },
    onShow() {
        this.initVideoPlayer();
    },
    onHide() {
        this.destroyVideoPlayer();
    },
    methods: {
        initVideoPlayer() {
            // 检查Video.js是否加载成功
            if (window.videojs) {
                // 初始化播放器
                this.player = videojs('my-player');
                
                // 播放器准备就绪回调
                this.player.ready(() => {
                    console.log('Video.js播放器初始化成功');
                    
                    // 优化性能
                    this.player.tech_.off('mousemove');
                    
                    // 显示加载状态
                    this.player.on('waiting', () => {
                        this.player.addClass('vjs-waiting');
                    });
                    this.player.on('playing', () => {
                        this.player.removeClass('vjs-waiting');
                    });
                    
                    // 设置自定义错误提示
                    this.player.on('error', () => {
                        const error = this.player.error();
                        if (error) {
                            console.error('播放器错误:', error);
                        }
                    });
                    
                    // 检查HLS支持
                    this.setupHlsPlayer();
                });
            } else {
                console.error('Video.js加载失败');
            }
        },
        
        setupHlsPlayer() {
            if (window.Hls) {
                // 使用hls.js
                const hls = new Hls({
                    maxBufferLength: 30,
                    maxMaxBufferLength: 60,
                    startFragPrefetch: true
                });
                
                hls.loadSource(this.options.src);
                hls.attachMedia(this.player.tech_.el().querySelector('video'));
                
                // 事件监听
                hls.on(Hls.Events.MANIFEST_PARSED, () => {
                    console.log('HLS清单解析成功');
                    this.player.play().catch(err => {
                        console.error('自动播放失败:', err);
                    });
                });
                
                // 错误处理
                hls.on(Hls.Events.ERROR, (event, data) => {
                    console.error('HLS错误:', data);
                    if (data.fatal) {
                        switch(data.type) {
                            case Hls.ErrorTypes.NETWORK_ERROR:
                                hls.startLoad();
                                break;
                            case Hls.ErrorTypes.MEDIA_ERROR:
                                hls.recoverMediaError();
                                break;
                            default:
                                this.handlePlayerError('HLS播放错误: ' + data.details);
                                hls.destroy();
                                break;
                        }
                    }
                });
                
                // 存储hls实例引用，便于销毁
                this.player.hls = hls;
            } else if (this.player.canPlayType('application/x-mpegURL')) {
                // 浏览器原生支持HLS
                console.log('浏览器原生支持HLS播放');
                this.player.src({ type: 'application/x-mpegURL', src: this.options.src });
                this.player.play().catch(err => {
                    console.error('自动播放失败:', err);
                });
            } else {
                this.handlePlayerError('当前浏览器不支持HLS播放');
            }
        },
        
        handlePlayerError(message) {
            if (this.player) {
                this.player.error({
                    code: 4,
                    message: message || '播放错误，请检查网络连接或直播地址'
                });
            }
            console.error(message);
        },
        
        destroyVideoPlayer() {
            if (this.player) {
                // 销毁HLS实例
                if (this.player.hls) {
                    this.player.hls.destroy();
                    delete this.player.hls;
                }
                
                // 销毁Video.js播放器
                this.player.dispose();
                this.player = null;
            }
        }
    }
}
</script>

<style scoped>
.box {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    position: absolute;
}

.live-left {
    width: 78%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.live-title {
    height: 5%;
    background-color: #f0f0f0;
    padding: 10px;
    font-weight: bold;
}

.video-container {
    height: 90%;
    width: 100%;
    position: relative;
    background-color: #000;
}

#my-player {
    width: 100%;
    height: 100%;
}

/* 自定义加载状态 */
.vjs-loading-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.gift-area {
    height: 5%;
    background-color: #f8f8f8;
    border-top: 1px solid #eee;
    padding: 10px;
}

.live-right {
    width: 20%;
    height: 100%;
    background-color: #f5f5f5;
    border-left: 1px solid #eee;
}
</style>  